<template>
  <!-- 视频评价内容 -->
  <div class="videoCommentBox">
    <p class="fontHt videoCommentBoxTitle">评价</p>
    <span class="ckqb fontHt" type="button">全部评论</span>
    <div class="commentListBox">
      <div class="commentOne" v-for="(item, index) in list.items" :key="index">
        <div class="userComment-Waike" :class="[{marL10:index === 2},{marR10:index === 0}]">

          <div class="commentListBoxOne">
            <div class="commentUser">
              <div class="commentUserBox">
                <a href="" class="wz-bt">
                  <span class="user-name fontHt">{{item.vcName}}</span>
                </a>
              </div>
              <ul class="commentUl">
                <li :class="{yellow:item.vcNum >= 1}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                    <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                  </svg>
                </li>
                <li :class="{yellow:item.vcNum >= 2}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                    <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                  </svg>
                </li>
                <li :class="{yellow:item.vcNum >= 3}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                    <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                  </svg>
                </li>
                <li :class="{yellow:item.vcNum >= 4}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                    <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                  </svg>
                </li>
                <li :class="{yellow:item.vcNum >= 5}">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-droplet-half" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10c0 0 2.5 1.5 5 .5s5-.5 5-.5c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
                    <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
                  </svg>
                </li>
              </ul>
            </div>
            <div class="commentBody">
              <a href="" class="wz-bt"><span class="fontHt wz-cc" :title="item.vcTitle">{{item.vcTitle}}</span></a>
              <span class="commentUserBody">{{item.vcBody}}</span>
              <span class="commentTime">发布于: <span>{{ item.vcType }}</span>&nbsp;&nbsp;</span><span class="commentTime">{{ item.vcUptime }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="noneDataBox" v-if="list.items.length === 0">
        <div class="dataBoxOne">
          <span class="fontHt c-hotpink">暂时还没有评价要第一个上吗？</span>
          <img class="tipImg" src="http://mcgamehome.love/img/background/5.png" alt="http://mcgamehome.love/img/background/5.png">
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref} from 'vue'
import API from "@/api/AxiosConfig";
import {useRoute} from "vue-router";

const list = reactive({
  items: [],
})
const route = useRoute()
let videoId = route.query.look
onMounted(() => {
  API({url: '/api/videoRp/'+videoId+'', method: 'Get'}).then(res => {
    list.items = res.data
  }).catch(err => {
  })

})
</script>

<style lang="less" scoped>
.tipImg{
  position: absolute;
  bottom: -2px;
  right: 3%;
  width: 190px;
}
.c-hotpink{
  color: hotpink;
}
.noneDataBox{
  width: 100%;
  display: flex;
  height: 150px;
}
.dataBoxOne{
  width: 100%;
  height: 90px;
  border-radius: 8px;
  border: 2px dashed hotpink;
  margin-top: 56px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  position: relative;

}
.videoCommentBoxTitle{
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 20px;
}
a{
  text-decoration: none;
}
.fontHt{
  font-family: "黑体";
  font-weight: bold;
}
.commentListBox{
  width: 100%;
  overflow: hidden;
  display: flex;
}
.commentListBoxOne{
  display: flex;
  flex-direction: column;
}
.commentOne{
  width: 33.3333%;
  position: relative;
}
.userComment-Waike{
  display: flex;
  /* flex: 1; */
  /* width: 100%; */
  background-color: #f4f4f4;
  padding: 10px 20px;

  flex-direction: column;
  overflow: hidden;
  border-radius: 4px;
}
.marL10{
  margin-left: 10px;
}
.marR10{
  margin-right: 10px;
}
/* 视频评价 */
.pjk{
  position: relative;
}
.commentUser{
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.user-name{
  justify-content: flex-start;
}
.videoCommentBox{
  overflow: hidden;
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid #e7e7e7;
  position: relative;
}
.commentUserBox{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display: inline-block;
  font-size: 12px;
  line-height: 25px;
  margin-right: 5px;
}
.commentUserBox>a{
  text-decoration: none;
  color: #000000;
}
.commentUl{
  list-style: none;
  margin: 0;
  padding: 0;
  width: 80px;
  min-width: 80px;
}
.commentUl>li{
  float: left;
  color: gray;
}
.yellow{
  color: #ffa726 !important;
}
.commentUserBody{
  width: 100%;
  font-size: 14px;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  position: relative;
}

.wz-bt{
  color:#000;
}
.wz-bt:hover{
  color: #e5609f;
}
.wz-cc{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
  position: relative;
}
/* 查看全部评论 */
.ckqb{
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 14px;
}
/* 评价时间 */
.commentTime{
  font-family: "黑体";
  font-weight: bold;
  font-size: 14px;
}


</style>
